<template>
    <div class="pager">
        <a href="javascript:;" v-for="n in pageCount" :class="{active:currentPage==n}" :key="n" @click="pagerBtnClk(n)">{{n}}</a>
    </div>
</template>

<script type="javascript">
export default {
    props:{
        pageNumber:{//当前页码
            default:1
        },
        pageSize:{
            default:5
        },
        recordCount:{
            default:0,
            type:Number
        }
    },
    data(){
        return{
            currentPage:this.pageNumber
        }
    },
    computed:{
        pageCount(){
            let {pageSize,recordCount} = this;
            return !recordCount?1:Math.ceil(recordCount/pageSize);
        }
    },
    methods:{
        pagerBtnClk(num){
            this.currentPage = num;
            this.$emit('page-change',num);
        }
    }
}
</script>
<style>
    .pager{text-align:center}
    .pager a{dispay:inline-block; color:#999; line-height:1.5; padding:0 5px; text-decoration:none;margin:0 2px; border:1px #999 solid;}
    .pager .active{background-color:#333; border-color:#333; color:#fff;}
</style>